<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>建议使用信管帮APP</title>
    <!-- 设计稿iPhone XR 414 html基础font-size=41.1px -->
    <!-- 该页面跳转缓慢，取消base64图片素材方法，采用webp图片素材格式 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            
        }
        a:link{
            color: #404040;
        }
        a:visited{
            color: #404040;
        }
        a:hover{
            color: #404040;
        }
        a:active{
            color: #404040;
        }
        ::-webkit-scrollbar{
            /* width: 0; 移动端取消滚动条无效*/
            display: none;
        }
        body{
            background: #f4f4f4;/*#2493f1*/
            display: flex;
            flex-direction: column;
            font-family: 微软雅黑;
            font-size: .3865rem;
            letter-spacing: .0169rem;
            position: relative;
            overflow: hidden;/*禁止上下滑动*/
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }
        
        section{/*
            border: 1px solid red;*/
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: scroll;
        }
        .container{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            box-sizing: border-box;
        }
        .container span.title{
            /*
            border: 1px solid red;*/
            width: 90%;
            font-size: .4348rem;
            font-weight: 550;
            margin: .3623rem 0;
        }
        .ul{
            /*
            border: 1px solid red;*/
            width: 90%;
            margin-bottom: .4831rem;
        }
        .ul li{
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .ul span.className, .ul span.result{
            width: 100%;
            display: flex;
            flex-direction: row;
            justify-content: left;
            font-size: .3865rem;
            margin-bottom: .2415rem;
        }
        textarea{
            width: 100%;
            background: #f9f9f9;
            border-radius: .1208rem;
            box-sizing: border-box;
            padding: .2415rem;
            font-size: .3623rem;
        }
        .imgBox{
            width: 100%;
        }
        .imgBox img{
            width: 100%;
            margin-bottom: .2415rem;
        }
        button{
            width: 100%;
            height: .9662rem;
            background: #2493f1;
            color: #fff;
            font-size: .3865rem;
            letter-spacing: .0169rem;
            border: none;
            border-radius: .1208rem;
            margin: .4831rem 0;
        }
        
        
        

        









        


        
    </style>
    <link rel="stylesheet" href="../../../../../css/header.css">
    <script src="../../../../../lib/jquery.min.js"></script>
    <script src="../../../../../lib/vue.js"></script>
    
</head>
<body>
    <header>
        <div class="backBtn"></div>
        <div class="left"></div>
        <span class="title">实验二-基本结构程序设计</span>
    </header>
    <script>
        document.querySelector(".backBtn").onclick=function(){
            window.history.go(-1)
        }
    </script>
    <section>
        <div class="container">
            <ul class="ul" style="margin-top: .3623rem;">
                <span class="result">项目结构</span>
                <div class="imgBox">
                    <img src="./img/xmjg.png" alt="">
                </div>
            </ul>
            
            <span class="title">
                1、if语句编程：根据输入的x值，输出y的值。
            </span>
            <ul class="ul ul1">
                <li>
                    <span class="className">IfExample.java</span>
                    <textarea name="" class="txt1" cols="30" rows="10"></textarea>

                    <button id="txt1" onclick="copy(event)">一键复制</button>
                    <span class="result">运行结果</span>
                    <div class="imgBox">
                        <img src="./img/1.png" alt="">
                    </div>
                </li>
                
           </ul>

            <span class="title">
                2、public&nbsp;class&nbsp;SwitchExample...
            </span>
            <ul class="ul ul1">
                <li>
                    <span class="className">SwitchExample.java</span>
                    <textarea name="" class="txt2" cols="30" rows="10"></textarea>
                    <button id="txt2" onclick="copy(event)">一键复制</button>
                    <span class="result">运行结果</span>
                    <div class="imgBox">
                        <img src="./img/2.png" alt="">
                    </div>
                </li>
                
           </ul>

            <span class="title">
                3、分别利用while循环，do-while循环，for循环编写程序，计算S=1+3+5+7+........+1001
            </span>
            <ul class="ul ul1">
                <li>
                    <span class="className">WhileExample.java</span>
                    <textarea name="" class="txt31" cols="30" rows="10"></textarea>
                    <button id="txt31" onclick="copy(event)">一键复制</button>
                    <span class="result">运行结果</span>
                    <div class="imgBox">
                        <img src="./img/31.png" alt="">
                    </div>
                </li>
                <li>
                    <span class="className">Do_whileExample.java</span>
                    <textarea name="" class="txt32" cols="30" rows="10"></textarea>
                    <button id="txt32" onclick="copy(event)">一键复制</button>
                    <span class="result">运行结果</span>
                    <div class="imgBox">
                        <img src="./img/32.png" alt="">
                    </div>
                </li>
                <li>
                    <span class="className">ForExample.java</span>
                    <textarea name="" class="txt33" cols="30" rows="10"></textarea>
                    <button id="txt33" onclick="copy(event)">一键复制</button>
                    <span class="result">运行结果</span>
                    <div class="imgBox">
                        <img src="./img/33.png" alt="">
                    </div>
                </li>
                
           </ul>

            <span class="title">
                4、输出斐波那契数列前100项，每10项换行输出。
            </span>
            <ul class="ul ul1">
                <li>
                    <span class="className">Fibo.java</span>
                    <textarea name="" class="txt4" cols="30" rows="10"></textarea>
                    <button id="txt4" onclick="copy(event)">一键复制</button>
                    <span class="result">运行结果</span>
                    <div class="imgBox">
                        <img src="./img/4.png" alt="">
                    </div>
                </li>
                
           </ul>

            <span class="title">
                5、利用数组进行排序，初始15个数组元素，元素值无序。
            </span>
            <ul class="ul ul1">
                <li>
                    <span class="className">ArraySort.java</span>
                    <textarea name="" class="txt5" cols="30" rows="10"></textarea>
                    <button id="txt5" onclick="copy(event)">一键复制</button>
                    <span class="result">运行结果</span>
                    <div class="imgBox">
                        <img src="./img/5.png" alt="">
                    </div>
                </li>
                
           </ul>





           
        </div>
            
            
        
    </section>


    

    <script>
        function readTxt(t, el) {
            $.get(`https://mp-e8e2bde5-0c0c-4622-87b5-66f8b08c3856.cdn.bspapp.com/code/work/J2EE_K22/test2/${t}.txt`,function(data) { 
                document.querySelector(el).value=data
            });
        }
        readTxt('IfExample', '.txt1')
        readTxt('SwitchExample', '.txt2')
        readTxt('WhileExample', '.txt31')
        readTxt('Do_whileExample', '.txt32')
        readTxt('ForExample', '.txt33')
        readTxt('Fibo', '.txt4')
        readTxt('ArraySort', '.txt5')
    </script>
    <script>
        function copy(e) {
            console.log(e.target.id)
            var element = document.querySelector("."+e.target.id);
            var copyBtn = document.getElementById(e.target.id);
            element.select();
            element.setSelectionRange(0, element.value.length);
            document.execCommand('copy');
            copyBtn.style.background='#c0c0c0'
            copyBtn.innerHTML='已复制'
            setTimeout(function(){
                copyBtn.style.background='#2493f1'
                copyBtn.innerHTML='一键复制'
            },2000)
        }
    </script>
    
    
    <script>
        //根据设备宽度计算html的font-size
        function resetHtmlFont(){
            //获取html对象并动态设置font-size = 设备宽度的1/10
            document.documentElement.style.fontSize = screen.width/10 + 'px';
        }
        //执行一下
        resetHtmlFont();
        //如果窗口大小改变了，则重新计算基础font-size
        window.onresize = resetHtmlFont;
    </script>
</body>
</html>